<template>
	<view class="bgview" @click="itemClick()">
		<view class="topview">
			<view class="top-left"><label class="lab-item-left"><span>{{data.title}}</span></label></view>
			<view v-if="data.salaryMax" class="top-right"><label
					class="lab-item-right">{{data.salaryMin}}~{{data.salaryMax}}{{data.unit}}</label></view>
			<view  v-else-if="!data.salaryMax&&!data.salaryMin" class="top-right">
				<label class="lab-item-right">面议</label>
			</view>		
			<view v-else class="top-right"><label class="lab-item-right">{{data.salaryMin}}{{data.unit}}</label></view>
		</view>
		<view class="centerview">
			<text class="contentLab">{{data.workContent}}</text>
			<!-- <u-parse class="txtlab" :html="data.workContent"></u-parse> -->
		</view>
		<view class="tag_container" v-if="data.welfares">
			<zyTag ref="zyAddTag" v-for="(item,index) in getTagList(data)" :text="item" addible />
		</view>
		<view class="buttomview" v-if="data.status==1">
			<view class="callview">
				<button class="callbtn" @click.stop="btnClick(1)">下线</button>
			</view>
			<view class="callview" v-if="data.contractMethod==1 || data.contractMethod==2">
				<button class="callbtn" @click.stop="btnClick(2)">查看报名</button>
			</view>
			<view class="callview" style="margin-left: auto;color: #5ac725;width: 18%;">
				已上线
			</view>
		</view>
		<view class="buttomview" v-if="data.status==2">
			<view class="callview">
				<button class="callbtn" @click="btnClick(3)">编辑</button>
			</view>
			<view class="callview">
				<button class="callbtn" @click.stop="btnClick(4)">删除</button>
			</view>
			<view class="callview" style="margin-left: auto;color: #f9ae3d;width: 18%;">
				未过审
			</view>
		</view>
		<view class="buttomview" v-if="data.status==3">
			<view class="callview">
				<button class="callbtn" @click.stop="btnClick(5)">重新上线</button>
			</view>
			<view class="callview" v-if="data.contractMethod==1 || data.contractMethod==2">
				<button class="callbtn" @click.stop="btnClick(2)">查看报名</button>
			</view>
			<view class="callview">
				<button class="callbtn" @click.stop="btnClick(4)">删除</button>
			</view>
			<view class="callview" style="margin-left: auto;color: #9a9998;width: 18%;">
				已下线
			</view>
		</view>
		<view class="lineview"></view>
	</view>
</template>
<script>
	import zyTag from '../zy-tag/zy-tag.vue'
	export default {
		name: "JobManageItem",
		components: {
			zyTag
		},
		props: {
			data: {
				type: Object,
				default () {
					return {};
				},
			},
		},
		data() {
			return {
				taglist: []
			};
		},
		methods: {
			strTrim(str) {
				return str.trim()
			},
			getTagList(data) {
				return data.welfares.split(",")
			},
			btnClick(type) {
				this.$emit("btnClick", {
					data: this.data,
					type: type
				});
			},
			itemClick(type) {
				// console.log('jobItemClick',this.data)
				this.$emit("jobItemClick", {
					data: this.data

				});
			},
		}
	}
</script>

<style lang="scss">
	/* 白色 */
	$zy-classic-white: #ffffff;

	/* 灰色 */
	$zy-classic-grey: #e9e9e9;
	$zy-dark-grey: #999999;

	.container {
		width: 100%;
		height: 100vh;
		background-color: $zy-classic-white;
	}

	.text {
		padding: 20rpx 0 0 20rpx;
		font-size: 26rpx;
		color: $zy-dark-grey;
	}

	.tag_container {
		display: flex;
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.contentLab {
		margin: 12rpx 0;
		font-size: 26rpx;
		color: #424242;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical
	}

	.txtlab {
		overflow: hidden;
		-webkit-line-clamp: 4;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #A1A1A1;
		font-size: 12pt;
	}

	.addLab {
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #a1a1a1;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.lineview {
		background-color: #F6F6F6;
		width: 100%;
		height: 5px;
	}

	.centerview {
		margin: 10px;
		background-color: white;
	}

	.buttomview {
		margin-left: 10px;
		padding-bottom: 10px;
		// background-color: gray;
		display: flex;
		flex-direction: row;
		height: 45px;
		justify-content: left;
		align-items: flex-start;

		.addr {
			display: flex;
			flex-direction: column;
			color: #a1a1a1;
			font-size: 24rpx;
			width: 65%;
		}

		.callview {
			// background-color: #a1a1a1;
			// padding: 15px;
			margin-top: 15px;
			height: 30px;
			// margin-left: 150px;
			width: 28%;

			.callbtn {
				margin-top: -10rpx;
				height: 60rpx;
				line-height: 60rpx;
				width: 180rpx;
				text-align: center;
				color: #fff;
				border-radius: 8rpx;
				background: #0575ff;
				font-size: 28rpx;

			}
		}
	}

	.bgview {
		padding-top: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;

		.topview {
			margin-top: 40rpx;
			display: flex;
			flex-direction: row;
			height: 30px;

			// justify-items: center;
			.top-left {
				// background-color: yellow;
				background-color: white;
				width: 55%;
				display: flex;
				justify-content: flex-start;
				padding-left: 10px;
				align-items: center;

				// justify-items: center;
				.lab-item-left {
					font-family: PingFang SC-Bold;
					text-align: left;
					font-size: 36rpx;
					color: #3D3D3D;
					margin-bottom: 15px;
					display: -moz-box;
					-moz-line-clamp: 2;
					-moz-box-orient: vertical;
					overflow-wrap: break-word;
					word-break: break-all;
					white-space: normal;
					overflow: hidden;
				}
			}

			.top-right {
				// background-color: goldenrod;
				background-color: white;
				width: 45%;
				display: flex;
				justify-content: flex-end;
				padding-right: 10px;
				text-align: center;
				align-items: center;

				// justify-items: center;
				.lab-item-right {
					font-family: PingFang SC-Bold;
					text-align: right;
					font-size: 36rpx;
					color: #3D3D3D;
					margin-bottom: 15px;
					display: -moz-box;
					-moz-line-clamp: 2;
					-moz-box-orient: vertical;
					overflow-wrap: break-word;
					word-break: break-all;
					white-space: normal;
					overflow: hidden;
				}
			}
		}
	}
</style>